<!--数据治理-健康度页面-->
<template>
  <div class="grid-content bg-purple"  >
    <div id="healthDegreeChart" style="width: 100%; height: 300px" />
  </div>
</template>


<script>
import * as echarts from 'echarts';
import api from "@/api/govern/govern";
export default {
  // 生命周期函数：内存准备完毕，页面渲染成功
  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.init()
  },
  data() {
    return {
      sumScore:0,
      scoreLevel:'',
      scoreList:[]
    };
  },
  methods: {

    // 加载banner列表数据
    init() {
      this.setChartData()
      api.globalScore().then((response) => {
        // this.sumScore = Math.round(response.data.sumScore/100);
        this.sumScore = response.data.sumScore/100;
        console.log(this.sumScore)
        this.scoreLevel = response.data.scoreLevel;
        this.scoreList = response.data.scoreList;
        this.setChartData();
      })
        .catch((response) => {
          console.log("失败" + response);
          // Vue.$message.error('服务器错误，请稍后再试')
          //reject(response)
        });
    },
    setChartData() {
      const option = {
        title: {
          text: '健康度总分'
        },
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  // [1, '#5570C4']
        [0.6, '#FF6E76'],
        [0.75, '#FDDD60'],
        [0.9, '#58D9F9'],
        [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '60%',
              width: 10,
              offsetCenter: [0, '-15%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 10,
              lineStyle: {
                color: 'auto',
                width: 1
              }
            },
            splitLine: {
              length: 15,
              lineStyle: {
                color: 'auto',
                width: 3
              }
            },
            axisLabel: {
              color: '#464646',
              // color: [
              //   [0.6, '#FF6E76'],
              //   [0.75, '#FDDD60'],
              //   [0.9, '#58D9F9'],
              //   [1, '#7CFFB2']
              // ],
              fontSize: 15,
              distance: -45,
              formatter: function (value) {
                if (value >= 0.9) {
                  return '优';
                } else if (value  >= 0.75) {
                  return '良';
                } else if (value >=0.6) {
                  return '中';
                }else if (value<=0.6) {
                  return '差';
                }
              }
            },
            title: {
              offsetCenter: [0, '0%'],
              fontSize: 15
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '30%'],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value*100) + '分';
              },
              color: 'auto',
            },
            data: [
              {
                value: this.sumScore,
                name: this.scoreLevel
              }
            ],
            center: ['25%', '55%'],
            radius: 95
          },
          {
            name: 'Budget vs spending',
            type: 'radar',
            // color:'7CFFB2',
            data: [
              {
                value: this.scoreList,
                name: 'Allocated Budget'
              }
            ]
          }
        ],
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '计算', max: 100 },
            { name: '存储', max: 100 },
            { name: '规范', max: 100 },
            { name: '安全', max: 100 },
            { name: '质量', max: 100 }
          ],
          center: ['75%', '45%'],
          radius: 90
        },
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("healthDegreeChart"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

